<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
	<script src="../../jsrender.js" type="text/javascript"></script>
	<script src="../../jquery.observable.js" type="text/javascript"></script>
	<script src="../../jquery.views.js" type="text/javascript"></script>
	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="nav"><a href="../demos.html">JsViews Demos</a></div>

<h3>Data-link with two-way binding and converters</h3>

<div id="amountPickers">

	<div class="box">
		<div class="subhead">Using convert and 'convert back' functions with integer-to-string conversion:</div>
		<em>&mdash; Binding to form elements, but keeping the 'amount' data as type 'number'</em><br /><br />

		<b>Choose amount:</b><br/><br/>
		<input data-link="{intToStr:amount:strToInt}"/><br /><br />

		<b>Choose amount:</b><br/><br/>
		<input type="radio" name="intVal" value="0" data-link="{intToStr:amount:strToInt}" />0<br/>
		<input type="radio" name="intVal" value="1" data-link="{intToStr:amount:strToInt}" />1<br/>
		<input type="radio" name="intVal" value="2" data-link="{intToStr:amount:strToInt}" />2<br/>
		<input type="radio" name="intVal" value="3" data-link="{intToStr:amount:strToInt}" />3<br/>
		<input type="radio" name="intVal" value="4" data-link="{intToStr:amount:strToInt}" />4<br/>
		<input type="radio" name="intVal" value="5" data-link="{intToStr:amount:strToInt}" />5<br/>
		<input type="radio" name="intVal" value="6" data-link="{intToStr:amount:strToInt}" />6<br/>
		<input type="radio" name="intVal" value="7" data-link="{intToStr:amount:strToInt}" />7<br /><br />

		<b>Choose amount:</b><br/><br/>
		<select data-link="{intToStr:amount:strToInt}">
			<option>0</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>6</option>
			<option>7</option>
		</select>
	</div>

	<div class="box">
		<div class="subhead">Convert and 'convert back' functions using bit-masks on the integer data value:</div>

		<b>Choose amount:</b><br/><br/>
		<input type="checkbox" data-link="{getBit:amount bit=0 :setBit}" /> bit 0<br />
		<input type="checkbox" data-link="{getBit:amount bit=1 :setBit}" /> bit 1<br />
		<input type="checkbox" data-link="{getBit:amount bit=2 :setBit}" /> bit 2<br />
	</div>

	<b>Amount: <div class="box subhead" data-link="amount"></div></b>

</div>

<script type="text/javascript">

	$.views.converters({
		setBit: function (value) {
			// "Convert Back": If checked, set this bit on the data, or if unchecked, unset this bit on the data
			var mask = 1 << this.tagCtx.props.bit, // Shift first bit, 0, 1 or 2 bits to the left, to create a mask
				dataValue = this.linkCtx.data[this.linkCtx.fn.paths[0]]; // Take the current data value
			return value ? (dataValue | mask) : (dataValue & ~mask); // Use the mask to set or unset that bit on the data, and return the modified value
		},
		getBit: function (value) {
			// "Convert": Get the bit from the data, and check or uncheck the checkbox
			return (value >> this.tagCtx.props.bit & 1) === 1; // Shift 0, 1 or 2 bits to the right, and see if the first bit is set.
		},
		intToStr: function (value) {
			return "" + value;
		},
		strToInt: function (value) {
			return parseInt(value);
		}
	});

	var data = { amount: 3 };

	$( "#amountPickers" ).link( true, data );

</script>
</body>
</html>
